<!---
  @author: HuangMingSheng
  @description: 面板组件
-->
<template>
  <div
    :class="[
      'ms-panel',
      {
        'ms-panel--bordered': bordered,
        'ms-panel--no-border': !bordered,
      },
    ]"
    :style="panelStyle"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
interface Props {
  /** 面板组件的圆角 */
  radius?: boolean | number;
  /** 面板组件是否需要边框 */
  bordered?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  radius: false,
  bordered: true,
});

const panelStyle = computed(() => {
  const style: Record<string, string> = {};

  if (props.radius) {
    if (typeof props.radius === "number") {
      style.borderRadius = `${props.radius}px`;
    } else {
      style.borderRadius = "4px";
    }
  }

  return style;
});

defineOptions({
  name: "MsPanel",
});
</script>

<style lang="less" scoped>
@import "./panel.less";
</style>
